<template>
  <div class="selectgood">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1200px" :close-on-click-modal="false" @close="close">
      <div class>
        <el-form :inline="true" :model="formInline" label-width="120px" class="demo-form-inline searchform">
          <div class="mar_b20">
            <el-form-item label="按门店名称：">
              <el-input v-model="formInline.keyword" size="medium" placeholder="请输入门店名称搜索" style="width: 200px;" @input="onSearch"></el-input>
            </el-form-item>
            <el-form-item label="按门店类别：">
              <el-select v-model="formInline.type" clearable placeholder="请选择" @change="onSearch">
                <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="按门店区域：" class="mar_l20">
              <el-select v-model="formInline.areaId" clearable placeholder="请选择" @change="onSearch">
                <el-option v-for="item in qyOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="按门店分组：" class="mar_t20">
              <el-select v-model="formInline.typeId" clearable placeholder="请选择" @change="onSearch">
                <el-option v-for="item in fzOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="按门店标签：" class="mar_t20">
              <el-select v-model="formInline.label" clearable placeholder="请选择" @change="onSearch">
                <el-option v-for="item in labelOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="mar_t20">
              <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
            </el-form-item>
          </div>
        </el-form>
        <el-table :data="list" stripe style="width: 100%" @selection-change="setSelectRows">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="商家名称">
            <template slot-scope="scope">
              <div class="flex flex-y-top">
                <div class>
                  <img class="goodlogo bor_rad5" :src="scope.row.icon" />
                </div>
                <div class="mar_l10">
                  <div class="flex">
                    <div class>{{scope.row.name}}</div>
                    <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.id}}）</el-tag>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="门店地址&联系电话" width="400">
            <template slot-scope="scope">
              <div>{{scope.row.address}}</div>
              <div>{{scope.row.storeTel}}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectStoreCategory, selectStore, postSelectStore } from '@/api/shop';

export default {
  name: 'labelSave',
  created() {},
  data() {
    return {
      formInline: {
        keyword: '',
        typeId: '',
        type: '',
        areaId: '',
        label: ''
      },
      title: '',
      dialogFormVisible: false,
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      typeOptions: [
        {
          id: '0',
          name: '全部'
        },
        {
          id: '1',
          name: '直营店'
        },
        {
          id: '2',
          name: '加盟店'
        }
      ],
      qyOptions: [],
      fzOptions: [],
      labelOptions: [],
      storeIds: [],
      storeId: ''
    };
  },
  components: {},
  methods: {
    async init() {
      var params = {
        page: this.page.currentPage,
        typeId: this.formInline.typeId,
        keyword: this.formInline.keyword,
        type: this.formInline.type,
        areaId: this.formInline.areaId,
        label: this.formInline.label,
        storeIds: this.storeIds
      };
      const { data, count } = await postSelectStore(params);
      this.list = data;
      this.page.total = count;
    },
    onSearch() {
      this.init();
    },
    setStoreId(storeId) {
      this.storeId = storeId;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.init();
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    async selectStoreCategory() {
      const { data } = await selectStoreCategory();
      this.qyOptions = data.area ? data.area : [];
      this.fzOptions = data.type ? data.type : [];
      this.labelOptions = data.label ? data.label : [];
    },
    search() {
      this.init();
    },
    async showEdit(row) {
      if (!row) {
        this.title = '选择门店';
        this.init();
        this.selectStoreCategory();
      } else {
        this.title = '编辑门店';
        console.log(row, this.storeIds);
        this.storeIds = row;
        this.init();
        this.selectStoreCategory();
      }
      this.dialogFormVisible = true;
    },
    close() {
      // this.$refs["form"].resetFields();
      // this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    async save() {
      if (this.selectRows.length > 0) {
        const id = this.selectRows.map((item) => item.id);
        if (this.storeIds) {
          var ids = id.concat(this.storeIds);
        }
        const { msg, data } = await postSelectStore({ ids });
        // this.$baseMessage(msg, "success");
        this.$emit('fetchData', data);
        this.close();
      } else {
        this.$baseMessage('未选中任何门店', 'error');
        return false;
      }
    }
  }
};
</script>
<style lang="scss">
.selectgood {
  .el-dialog {
    border-radius: 5px;
  }
  .el-input-number {
    width: auto;
    height: 40px;
    line-height: 40px;
  }
  .el-dialog__header {
    border-bottom: 1px solid #eee;
  }
  .el-dialog__footer {
    border-top: 1px solid #eee;
  }
}
</style>
